<template>
    <div class="app-container">
        
        <div id="register" class="student"></div>

        <div id="login" class="student"></div>
        
        <div id="age" class="student"></div>

        <div id="gender" class="student"></div>
    
    </div>
</template>
<script>
    import * as echarts from 'echarts';
    export default{
        data(){
            return {
                
            }
        },
        created(){
            
        },
        mounted(){
            let newPromise = new Promise((resolve) => {
                resolve()
            })

            newPromise.then(() => {
                //	此dom为echarts图标展示dom
                this.init()
            })
        },
        methods:{
            init(){
                this.register()
                this.login()
                this.age()
                this.gender()
            },
            //学生注册人数折线图展示
            register(){
                var chartDom = document.getElementById('register');
                var myChart = echarts.init(chartDom);
                var option;
                option = {
                    title: {
                        text: '学生注册情况',
                        left: 'center'
                    },
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [150, 230, 224, 218, 135, 147, 260],
                        type: 'line'
                    }]
                };
                option && myChart.setOption(option);
            },
            //学生注册人数柱状图展示
            login(){
                var chartDom = document.getElementById('login');
                var myChart = echarts.init(chartDom);
                var option;
                option = {
                    title: {
                        text: '学生注册情况',
                        left: 'center'
                    },
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [120, 200, 150, 80, 70, 110, 130],
                        type: 'bar'
                    }]
                };
                option && myChart.setOption(option);
            },
            //学生年龄分布
            age(){
                var chartDom = document.getElementById('age');
                var myChart = echarts.init(chartDom);
                var option;
                option = {
                    title: {
                        text: '学生年龄分布',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '50%',
                            data: [
                                {value: 1048, name: '搜索引擎'},
                                {value: 735, name: '直接访问'},
                                {value: 580, name: '邮件营销'},
                                {value: 484, name: '联盟广告'},
                                {value: 300, name: '视频广告'}
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                option && myChart.setOption(option);
            },
            //学生性别分布
            gender(){
                var chartDom = document.getElementById('gender');
                var myChart = echarts.init(chartDom);
                var option;
                option = {
                    title: {
                        text: '学生性别分布',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '50%',
                            data: [
                                {value: 1048, name: '搜索引擎'},
                                {value: 735, name: '直接访问'},
                                {value: 580, name: '邮件营销'},
                                {value: 484, name: '联盟广告'},
                                {value: 300, name: '视频广告'}
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                option && myChart.setOption(option);
            }
        }
    }

</script>
<style rel="stylesheet/scss" lang="scss">
.student{
    width:45%;
    height:350px;
    float:left;
}
#register{
    border-right: 1px solid black;
    border-bottom: 1px solid black;
}
#login{
    border-left: 1px solid black; 
    border-bottom: 1px solid black;
}
#age{
    border-top: 1px solid black;
    border-right: 1px solid black;
}
#gender{
    border-top: 1px solid black;
   border-left: 1px solid black; 
}
</style>